import React, { ButtonHTMLAttributes, AnchorHTMLAttributes } from 'react'
import classNames from 'classnames'

export type ButtonSize = 'lg' | 'sm' // 按钮大小
export type ButtonType = 'primary' | 'default' | 'danger' | 'link' // 按钮类型
export interface BaseButtonProps {
  className?: string // 类名
  disabled?: boolean // 是否禁用
  size?: ButtonSize // 尺寸
  btnType?: ButtonType // 类型
  children?: React.ReactNode // 子元素
  href?: string // 链接
}
export type ButtonProps = BaseButtonProps & ButtonHTMLAttributes<HTMLElement> & AnchorHTMLAttributes<HTMLElement>
export const Button = ({
  btnType = 'default', // 默认类型
  disabled = false,
  className,
  size,
  children,
  href,
  ...rest
}: ButtonProps) => {
  // 类名
  const classes = classNames('btn', className, {
    [`btn-${btnType}`]: btnType, // 主题类名
    [`btn-${size}`]: size, // 尺寸类名
    disabled: btnType === 'link' && disabled // 禁用
  })
  // a 标签
  if (btnType === 'link' && href) {
    return (
      <a className={classes} href={href} {...rest}>
        {children}
      </a>
    )
  } else {
    return (
      <button className={classes} disabled={disabled} {...rest}>
        {children}
      </button>
    )
  }
}
export default Button
